<template>
	<view class="content">
		<view style="margin-top: 30rpx;" class="block">
			<image :src="info.logoUrl?info.logoUrl:imageUrl+'/job_hunting/job_detail/enterprise.jpg'"
				@error="onErrorImg(info)" class="company-photo"></image>
			<view class="company-info">
				<view class="company-item">
					<view class="company-name">{{info.brandName}}</view>
					<view class="attention" v-if="info.follow===0&&user" @click="addLookMe">关注</view>
					<view class="attention1" v-if="info.follow===1&&user" @click="insertLookMe">已关注</view>
				</view>
				<view style="display: flex;flex-direction: row; margin-top: 16rpx;">
					<view class="icon-item"
						style="display: flex;flex-direction: row; margin-right: 20rpx;align-items: center;">
						<view class="iconfont icon-jibenziliao"
							style="color: #FF8888; font-size: 36rpx;font-weight: bold;"></view>
						<view class="text" style="font-size: 24rpx;">已认证营业执照</view>
					</view>
					<view class="icon-item" style="display: flex;flex-direction: row;align-items: center;">
						<view class="iconfont icon-wode" style="color: #79DEA2;font-weight: bold;"></view>
						<view class="text" style="font-size: 24rpx;">已认证手机号</view>
					</view>
				</view>

				<view class="others" style="display: flex;flex-direction: row;">
					<text space="nbsp" class="other"
						v-if="info.enterpriseTypeText">甘肃酒泉&nbsp;·&nbsp;{{info.enterpriseTypeText||''}}&nbsp;·&nbsp;{{info.natureText||'暂无'}}&nbsp;·&nbsp;{{info.scaleVo.data||''}}</text>
					<text class="other" v-else>暂无行业</text>
				</view>
				<view class="form-label">
					<view class="form-title-label" v-if="form.isStateOwned>0">
						国有</view>
					<view class="form-title-label" v-if="form.isDomesticInvestment>0">
						内资</view>
					<view class="form-title-label" v-if="form.isGoOnTheMarket>0">
						上市</view>
				</view>
			</view>
		</view>
		<view class="block dark adreess-block">
			<view class="title">公司地址</view>
			<view class="address">
				<view class="iconfont icon-dingwei"></view>
				<view class="address-content">{{info.enterpriseAddress}}</view>
			</view>
			<map style="width: 100%; height: 280px;" :latitude="latitude" :longitude="longitude" markers="">
			</map>
		</view>
		<view class="title">公司介绍</view>
		<view class="block dark aaum-block">
			<view class="info-item">{{info.enterpriseIntroduction}}</view>
		</view>
		<view class="title">企业图册</view>
		<view class="block dark aaum-block">
			<template v-if="swiperList.length>0">
				<SwiperMap style="width: 100%;height: 400rpx;" :list="swiperList"></SwiperMap>
			</template>
			<view v-else>暂无图片</view>
		</view>
<!-- 		<view class="title">福利待遇</view>
		<view class="block dark aaum-block">
			<view class="info-item">{{info.welfare}}</view>
		</view> -->
		<view class="title">工商信息</view>
		<view class="block dark aaum-block">
			<view class="info-item">公司全称：{{info.enterpriseName}}</view>
			<view class="info-item" v-if="info.estdate">成立时间：{{info.estdate}}</view>
			<view class="info-item" v-else>成立时间：暂无</view>
			<view class="info-item">注册资本：{{info.regcap}}万人民币</view>
			<view class="info-item">法人代表：{{info.legalPersonName}}</view>
		</view>
		<view class="title">招聘职位</view>
		<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+item.id)" class="block dark aaum-block"
			v-for="(item,index) in info.jobPublishList" :key="item.id">

			<view class="info-list">
				<view class="info-title">{{item.jobTitle}}</view>
				<view class="info-money" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}元</view>
				<view class="info-money" v-else>面议</view>
			</view>
			<view class="info-item">{{item.minEducationText}} {{item.expRequireText}}</view>
			<view class="info-item">{{item.jobAddress}}</view>
		</view>
		<SuccessDialog v-if="showDialog" cancelText="查看我关注的企业" confirmText="继续找工作" @callback="dialogCallback">
			<slot>
				<image src="/static/tabbar/3adf1ae20d1e3f45cc08c75cbf181b1.png" style="width: 150rpx;height: 150rpx;">
				</image>
				<view style="color: #000;">关注成功！</view>
			</slot>
		</SuccessDialog>
	</view>
</template>

<script>
	import {
		getEnterpriseByIdApi
	} from '@/api/company.js'
	import {
		getSwiperList as getSwiperListApi
	} from '@/api/static.js'
	import {
		insertLookMe
	} from '@/api/job_hunting.js'
	import SuccessDialog from '@/page_other/components/SuccessDialog/SuccessDialog.vue';
	export default {
		components: {
			SuccessDialog
		},
		data() {
			return {
				showDialog: false,
				id: 0,
				info: {
					comName: '',
					logoUrl: '',
					brandName: '',
					comType: '',
					financing: '',
					scale: '',
					address: '',
					welfare: '',
					comIntroduction: '',
					legalPersonName: '',
					recap: '',
					estDate: '',
					jobPublishList: []
				},
				swiperList: [],
				imageUrl: '',
				latitude: 39.803382,
				longitude: 98.571037,
			}
		},
		methods: {
			//onShareAppMessage 分享给朋友
			//onShareTimeline  分享到朋友圈
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					title: this.info.enterpriseName,
					path: '/page_other/company/company?id=' + this.id
				}
			},
			// #endif
			onShareTimeline(res) {
				let distSource = uni.getStorageSync('distSource');
				if (distSource) {
					return {
						title: this.info.enterpriseName,
						path: '/page_other/company/company?id=' + this.id,
						type: 0,
						query: 'id=' + distSource,
					}
				}
			},
			onErrorImg(item) {
				this.$set(item, 'logoUrl', this.imageUrl + '/job_hunting/job_detail/enterprise.jpg');
			},
			dialogCallback(e) {
				console.log(e);
				if (e) {
					this.showDialog = false;
				} else {
					uni.navigateTo({
						url: '/page_other/count_details/attention'
					})
					this.showDialog = false;
				}
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getCompanyInfo() {
				getEnterpriseByIdApi({
					id: this.id
				}).then((res) => {
					this.info = res ?? [];
					this.swiperList = res.albumModelList
					console.log(this.info)
					this.latitude = res.enterpriseLatitude,
					this.longitude = res.enterpriseLongitude,
					console.log(this.swiperList)
				}).catch((res) => {
					this.showToast('公司信息不存在', function() {
						uni.navigateBack({

						})
					})
				})
			},
			addLookMe() {
				uni.showLoading({
					title: '关注中'
				})
				insertLookMe({
					eid: this.id,
					userType: 1,
					lookMeType: 2,
					state: 2
				}).then((res) => {
					uni.hideLoading();
					this.showDialog = true;
					this.getCompanyInfo();
				}).catch(() => {
					console.log(res)
				})
			},
			insertLookMe() {
				uni.showLoading({
					title: '取消关注中'
				})
				insertLookMe({
					eid: this.id,
					userType: 1,
					lookMeType: 2,
					state: 1
				}).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '取消关注成功',
						icon: 'success'
					});
					this.getCompanyInfo();
				}).catch(() => {
					console.log(res)
				})
			},
			lookMe() {
				if (this.user) {
					insertLookMe({
						eid: this.id,
						userType: 1,
						lookMeType: 1,
						state: 2
					}).then((res) => {}).catch(() => {
						console.log(res)
					})
				}
			},
		},
		computed: {
			user() {
				return this.$store.getters.user
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.imageUrl = this.globalConfig.imageUrl;
			this.getCompanyInfo();
			this.lookMe()
		},
		onReady() {
			uni.setNavigationBarColor({
				backgroundColor: '#4B4D5A',
				frontColor: '#ffffff',
			})
			uni.setNavigationBarTitle({
				title: this.brandName
			})
		}
	}
</script>

<style lang="scss">
	page {
		background: #4B4D5A;
	}

	.content {
		width: 100%;
		padding: 30rpx;
		color: #fff;

		.block {
			width: 100%;
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;

			.company-photo {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				flex-grow: 0
			}

			.company-info {
				width: calc(100% - 140rpx);
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.company-item {
					width: 100%;
					display: flex;
					flex-direction: row;

					.company-name {
						width: calc(100% - 150rpx);
						font-size: 34rpx;
						font-weight: bold;
						margin-right: 40rpx;
					}

					.attention {
						margin-top: 10rpx;
						width: 120rpx;
						height: 45rpx;
						background: #FF7626;
						color: #fff;
						border-radius: 20rpx;
						text-align: center;
						font-size: 30rpx;
					}

					.attention1 {
						margin-top: 10rpx;
						width: 120rpx;
						height: 45rpx;
						background: none;
						color: #FF7626;
						border: 2rpx solid #FF7626;
						border-radius: 20rpx;
						text-align: center;
						font-size: 30rpx;
					}
				}

				.form-label {
					display: flex;
					margin-top: 20rpx;

					.form-title-label {
						font-size: 12px;
						color: #fff;
						//background-color: #CCDDFF;
						border: 1rpx solid #fff;
						width: 120rpx;
						height: 40rpx;
						border-radius: 10rpx;
						text-align: center;
						padding-top: 3rpx;
						margin-right: 20rpx;
					}
				}

				.other {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #efefef;
				}
			}
		}

		.block.dark {
			background: #464855;
			border-radius: 20rpx;
		}

		.block.adreess-block {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 30rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.address {
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 20rpx;

				.icon-dingwei {
					flex-grow: 0;
					color: #FF7626;
					margin-right: 10rpx;
				}

				.address-content {
					flex-grow: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #efefef;
					margin-bottom: 10rpx;
				}

				.arrow {
					flex-grow: 0;
					font-size: 24rpx;
				}
			}
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
		}

		.aaum-block {
			margin-top: 30rpx;
			padding: 30rpx;
			font-size: 28rpx;
			color: #efefef;
			display: flex;
			flex-direction: column;

			.info-item {
				width: 100%;
				padding: 10rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				// white-space: nowrap;
			}

			.info-list {
				display: flex;
				flex-direction: row;

				.info-title {
					padding: 10rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 32rpx;
					font-weight: bold;
					flex-grow: 1;
				}

				.info-money {
					padding: 10rpx 0;
					font-size: 32rpx;
					font-weight: bold;
				}
			}


		}
	}
</style>